
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #main-nav {
            margin-left: 1px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a {
            padding: 10px 8px;
            font-size: 12px;
            font-weight: 600;
            color: #4A515B;
            background: #E9E9E9;
            background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
            background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
            border: 1px solid #D5D5D5;
            border-radius: 4px;
        }

        #main-nav.nav-tabs.nav-stacked > li > a > span {
            color: #4A515B;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }

        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
            color: #FFF;
        }

        #main-nav.nav-tabs.nav-stacked > li {
            margin-bottom: 4px;
        }

        /*定义二级菜单样式*/
        .secondmenu a {
            font-size: 10px;
            color: #4A515B;
            text-align: center;
        }

        .navbar-static-top {
            background-color: #212121;
            margin-bottom: 5px;
        }

        .navbar-brand {
            background: url('') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            color: #fff;
        }

    </style>
</head>

<body>
<div class="navbar navbar-duomi navbar-static-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" style="padding-left: 50px;" href="#" id="logo">高速收费项目管理后台
            </a>
            <a class="navbar-brand" style="padding-left: 850px;" href="/login/logout">登出
            </a>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
                <li class="active" data-value="APP用户管理">
                    <a href="#">
                        <i class="glyphicon glyphicon-th-large"></i>
                        APP用户管理
                    </a>
                </li>
                </li>
                <li data-value="后台用户列表">
                    <a href="#">
                        <i class="glyphicon glyphicon-credit-card"></i>
                        后台用户列表
                    </a>
                </li>
                <li data-value="添加后台用户">
                    <a href="#">
                        <i class="glyphicon glyphicon-credit-card"></i>
                        添加后台用户
                    </a>
                </li>
                <li data-value="发票管理">
                    <a href="#">
                        <i class="glyphicon glyphicon-credit-card"></i>
                        发票管理
                    </a>
                </li>

                <li data-value="广告管理">
                    <a href="#">
                        <i class="glyphicon glyphicon-globe"></i>
                        广告管理
                        <span class="label label-warning pull-right">5</span>
                    </a>
                </li>

                <li data-value="退款管理">
                    <a href="#">
                        <i class="glyphicon glyphicon-calendar"></i>
                        退款管理
                    </a>
                </li>
                <li data-value="意见管理">
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        意见管理
                    </a>
                </li>
                <li data-value="申诉管理">
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        申诉管理
                    </a>
                </li>
                <li data-value="充值报表">
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        充值报表
                    </a>
                </li>
                <li data-value="消费报表">
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        消费报表
                    </a>
                </li>
                <li data-value="充值管理">
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        充值管理
                    </a>
                </li>
                <li data-value="优惠券管理">
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        优惠券管理
                    </a>
                </li>
                <li data-value="车辆审核">
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        车辆审核
                    </a>
                </li>
                <li data-value="设置">
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        设置
                    </a>
                </li>
                <li data-value="统计车辆数量">
                    <a href="#">
                        <i class="glyphicon glyphicon-fire"></i>
                        统计车辆数量
                    </a>
                </li>
            </ul>
        </div>

        <div class="col-md-10" >
            <iframe id="myiframe" width="100%" height="875px" frameborder="no" border="0" scrolling="yes">
            </iframe>
        </div>

    </div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
    var ifm= document.getElementById("myiframe");
//
//    ifm.height=document.documentElement.clientHeight;
//    ifm.width=document.documentElement.clientWidth;
    $(function (){
        $('#main-nav li').click(function (){
            //把之前已有的active去掉
            $('.active').removeClass('active');
            //当前点击的li加上class
            $(this).addClass("active");

            ifm.src="";

            if($(this).attr("data-value")=='APP用户管理'){
                ifm.src="/admin/user/";
            }
            if($(this).attr("data-value")=='后台用户列表'){
                ifm.src="/admin/user/adminUserList";
            }
            if($(this).attr("data-value")=='添加后台用户'){
                ifm.src = "/admin/user/adminUserAdd";
            }
            if($(this).attr("data-value")=='发票管理'){
                ifm.src="/admin/invoice/";
            }
            if($(this).attr("data-value")=='广告管理'){
                ifm.src="/admin/banner/";
            }
            if($(this).attr("data-value")=='车辆审核') {
                ifm.src="/admin/car/";
            }
            if($(this).attr("data-value")=='充值管理') {
                ifm.src="/admin/chargeGive/";
            }
            if($(this).attr("data-value")=='充值报表') {
                ifm.src="/admin/charge/";
            }
            if($(this).attr("data-value")=='优惠券管理') {
                ifm.src = "/admin/coupon/";
            }
            if ($(this).attr("data-value")=='设置') {
                ifm.src = "/admin/feeSetting/";
            }
            if ($(this).attr("data-value")=='申诉管理') {
                ifm.src = "/admin/appeal/";
            }
            if ($(this).attr("data-value")=='统计车辆数量') {
                ifm.src = "/admin/travel/car";
            }
            if ($(this).attr("data-value")=='消费报表') {
                ifm.src = "/admin/travel/consume";
            }
            if ($(this).attr("data-value")=='退款管理') {
                ifm.src = "/admin/refund/";
            }
            if ($(this).attr("data-value")=='意见管理') {
                ifm.src = "/admin/feed/";
            }
        });
    })
</script>
</body>
</html>
